<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>记录列表页</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/stylesheets/base.css">
  <script src="/layui/layui.js"></script>
  <script src="/javascripts/jquery.js"></script>
  <script src="/javascripts/ajax.js"></script>
</head>
<body>
<div class="layui-panel">
  <form class="layui-form" style="margin: 10px auto">
    <div class="layui-form-item">
      <div class="layui-inline">
        <label for="optTime" class="layui-form-label">操作时间</label>
        <div class="layui-input-inline">
          <input type="text" class="layui-input" name="optTime" readonly id="optTime" placeholder="选择操作事件范围">
        </div>
      </div>
      <div class="layui-inline">
        <label for="userId" class="layui-form-label">申请人</label>
        <div class="layui-input-inline">
          <select lay-search name="userId" id="userId">

          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="goodsId" class="layui-form-label">申请商品</label>
        <div class="layui-input-inline">
          <select lay-search name="goodsId" id="goodsId">

          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="optId" class="layui-form-label">操作人</label>
        <div class="layui-input-inline">
          <select lay-search name="optId" id="optId">

          </select>
        </div>
      </div>
      <div class="layui-inline">
        <label for="type" class="layui-form-label">申请类型</label>
        <div class="layui-input-inline">
          <select name="type" id="type">
            <option value="">[选择状态]</option>
            <option value="1">入库</option>
            <option value="2">出库</option>
          </select>
        </div>
      </div>
      <div class="layui-inline">
        <div class="layui-input-inline">
          <button type="submit" lay-submit lay-filter="searchBtn" class="layui-btn">查询</button>
          <button type="reset" class="layui-btn">清空</button>
        </div>
      </div>
    </div>

  </form>
</div>
<div class="layui-panel">
  <table id="dataTable"></table>
</div>
</body>
<script type="text/html" id="typeTemp">
  {{# if(d.type === 1){ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="inStore">入库</button>
  {{# }else{ }}
  <button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="outStore">出库</button>
  {{# } }}
</script>
<script>
  const {table,form,laydate} = layui;
  $(function () {
    getGoodsList()
    getUserList()
    getOptList()
    laydate.render({
      elem:"#optTime",
      type:"datetime",
      range:true,
      shortcuts: [
        {
          text: "上个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month - 1, 1),
              new Date(year, month, 0)
            ];
          }
        },
        {
          text: "这个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month, 1),
              new Date(year, month + 1, 0)
            ];
          }
        },
        {
          text: "下个月",
          value: function(){
            const date = new Date();
            const year = date.getFullYear();
            const month = date.getMonth();
            return [
              new Date(year, month + 1, 1),
              new Date(year, month + 2, 0)
            ];
          }
        }
      ]
    });
    table.render({
      elem:"#dataTable",
      url:"/records/page",
      page:true,
      limit:5,
      limits:[5,10,20,50,100],
      toolbar:true,
      cols:[[
        {field:"id",title:"编号",},
        {field: "applyName",title: "申请人"},
        {field: "goodsName",title: "申请商品"},
        {field: "optName",title: "操作人"},
        {field: "applyCount",title: "申请数量"},
        {field: "count",title: "实际数量"},
        {field: "optTime",title: "操作时间",width:180,templet: function (d) {
            const now = new Date();
            const expire = new Date(d.optTime);
            const dateStr = formatDateTime(expire);
            if(now.getTime() > expire.getTime()){
              return `${dateStr}`
            }
            return `${dateStr}`
          }},
        {field:"status",title: "类型",templet:"#typeTemp"}
      ]]
    });
    form.on("submit(searchBtn)",function (data) {
      table.reload("dataTable",{
        where:data.field,
        page:{
          curr:1
        }
      })
      return false;
    })
    table.on("tool(dataTable)",function (data) {
      const event = data.event;
          const id = data.data.id;
          switch (event){
            case "delete":
              layer.confirm(`确定删除编号[${id}]的数据吗？`,{icon:3,title:"询问"},function (index) {
                ajax.delete("/records/delete/"+id).then(()=>{
                  layer.msg("删除成功！",{icon:6});
                  reloadTable();
                })
                layer.close(index);
              })
              break;
            default:
              break;
          }
    })
  })

  function reloadTable() {
    table.reload('dataTable');
  }

  function getGoodsList() {
    ajax.get('/goods/select').then(data=>{
      let $html = `<option value="">[选择申请商品]</option>`
      for(const s of data){
        $html+=`<option value="${s.id}">${s.name}</option>`
      }
      $("#goodsId").empty().append($html);
      form.render();
    })
  }

  function getUserList() {
    ajax.get('/userinfo/select/3').then(data=>{
      let $html = `<option value="">[选择申请人]</option>`
      for(const s of data){
        $html+=`<option value="${s.id}">${s.username}</option>`
      }
      $("#userId").empty().append($html);
      form.render();
    })
  }

  function getOptList() {
    ajax.get('/userinfo/select/2').then(data=>{
      let $html = `<option value="">[选择操作人]</option>`
      for(const s of data){
        $html+=`<option value="${s.id}">${s.username}</option>`
      }
      $("#optId").empty().append($html);
      form.render();
    })
  }
</script>
</html>
